<template>
    <div class="app-container">

        <el-card class="filter-container" shadow="never">
            <div>
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
                <el-button
                        style="float:right"
                        type="primary"
                        @click="initdata()"
                        size="small">
                    查询搜索
                </el-button>
                <el-button
                        style="float:right;margin-right: 15px"
                        @click="resetfiled()"
                        size="small">
                    重置
                </el-button>
            </div>
            <div style="margin-top: 15px">
                <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
                    <el-form-item label="type">
                        <el-input v-model="type" class="input-width" placeholder="请输入type" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="msg">
                        <el-input v-model="msg" class="input-width" placeholder="请输入msg" clearable></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card class="operate-container" shadow="never">
            <i class="el-icon-tickets"></i>
            <span>数据列表</span>
            <el-button size="mini" class="btn-add" @click="isadd()" style="margin-left: 20px">添加</el-button>
        </el-card>

        <div style="margin:0px;">
            <el-table :data="tableData" border stripe>
                <el-table-column prop="id" label="id" align="center"></el-table-column>
                <el-table-column prop="type" label="type" align="center"></el-table-column>
                <el-table-column prop="msg" label="msg" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="delrecord(scope.row)">删除</el-button>
                        <el-button type="primary" @click="isupdate = true;refform = scope.row; isadddia = true;">更新</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="text-align:center;">
            <el-pagination
                    @size-change="sizeChange"
                    @current-change="currentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalNum" background>
            </el-pagination>

        </div>
        <el-dialog :title="isupdate ? '更新' : '添加'" :visible.sync="isadddia" center width="40%" @close="isadddia = false">
            <el-form :model="refform" ref="refform" label-width="80px" style="margin: 0px 70px;">
                <el-form-item label="type">
                    <el-input v-model="refform.type" ></el-input>
                </el-form-item>
                <el-form-item label="msg">
                    <el-input v-model="refform.msg" ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="isadddia = false">取 消</el-button>
                <el-button type="primary" @click="isupdate ? updaterecord() : addrecord()">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
    import SysconfService from "@/api/SysconfService";

    export default {
        components: {},
        data() {
            return {
                listQuery: {
                id: "",
                type: "",
                msg: "",
                },
                pageSize: 5,
                currentPage: 1,
                totalNum: 0,
                isupdate: false,
                isshowqr: false,
                qrdata: '',
                tableData: [],
                isadddia: false,
                refform: {
                    type: "",
                    msg: "",
                }
            };
        },
        computed: {},
        watch: {},
        mounted() {
            this.initdata();
        },
        methods: {
            sizeChange(val){
                this.pageSize = val
                this.initdata()
            },
            currentChange(val){
                this.currentPage = val
                this.initdata()
            },

            delrecord(row){
                    SysconfService.remove({code: row.code}).then(res => {
                    console.log(res);
                    this.initdata()
                });

            },
            updaterecord(){
                    SysconfService.update(this.refform).then(res => {
                    console.log(res);
                    this.isadddia = false;
                    this.initdata()
                });

            },
            initdata() {
                    SysconfService.list({current: this.currentPage, size: this.pageSize,
                        type: this.type,
                        msg: this.msg,
                    }).then(res => {
                    console.log(res);
                    this.tableData = res.data.records;
                    this.totalNum = res.data.total;
                })
            },
            isadd() {
                this.isadddia = true;
                this.isupdate = false;
                this.refform.type = ""
                this.refform.msg = ""

            },

            resetfiled() {
                this.listQuery.type = ""
                this.listQuery.msg = ""
            },

            addrecord() {
                // this.isadddia = true
                    SysconfService.insert(this.refform).then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        this.isadddia = false;
                        this.initdata();
                    }
                });
            }
        }
    };
</script>
<style lang='scss' scoped>
</style>